<template>
    <div class="content">
        <van-form colon @submit="onSubmit" validate-first @failed="onFailed">
            <div class="title">人员基本信息</div>
            <van-field
                    v-model="formItem.name"
                    name="name"
                    label="姓名"
                    placeholder="请填写真实姓名"
                    :maxlength="20"
                    @focus="bodyScrollTop"
                    @blur="bodyScrollTop"
                    :rules="[{ validator: nameValidator,required: true, message: '请输入姓名' }]"></van-field>
            <van-field name="sex" label="性别" :rules="[{ required: true, message: '请选择性别' }]">
                <template #input>
                    <van-radio-group v-model="formItem.sex" direction="horizontal">
                        <van-radio name="男" icon-size="18px">男</van-radio>
                        <van-radio name="女" icon-size="18px">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-model="formItem.tel" name="tel" label="手机号" :rules="phoneRules" placeholder="请填写有效手机号"
                       @focus="bodyScrollTop" @blur="bodyScrollTop"/>
            <van-field v-model="formItem.sms" type="digit" name="sms" label="验证码" :rules="codeRules"
                       @focus="bodyScrollTop" @blur="bodyScrollTop">
                <van-button slot="button"
                            :color="codeBtnColor"
                            :disabled="sendBtnType"
                            native-type="button"
                            type="info"
                            class="van-button van-button--primary van-button--small"
                            @click="showMobileCodeAction">{{ sendBtnName }}
                </van-button>
            </van-field>
            <van-field
                    readonly
                    clickable
                    name="card_type"
                    :value="formItem.card_type_name"
                    label="证件类型"
                    placeholder="请选择"
                    :rules="[{ validator: cardTypeValidator, trigger:'onChange', message: '请选择证件类型' }]"
                    @click="showIdCardTypePicker = true"
            />
            <van-action-sheet
                    v-model="showIdCardTypePicker"
                    :actions="cardTypeOption"
                    cancel-text="取消"
                    @select="onCardTypeConfirm"
                    @cancel="showIdCardTypePicker = false"
            />
            <!--<van-popup v-model="showIdCardTypePicker" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="cardTypeOption"
                        @confirm="onCardTypeConfirm"
                        @cancel="showIdCardTypePicker = false"
                />
            </van-popup>-->
            <van-field
                    v-model="formItem.card_no"
                    name="card_no"
                    label="证件号码"
                    @blur="identityCardno"
                    @focus="bodyScrollTop"
                    placeholder="请填写有效证件号码"
                    :rules="[{ validator: idCardValidator, message: '证件号码格式有误' }]"
            />
            <van-field name="is_permanent" label="是否常住居民" :rules="[{ required: true, message: '请选择是否常住居民' }]">
                <template #input>
                    <van-radio-group v-model="formItem.is_permanent" direction="horizontal">
                        <van-radio name="1" icon-size="18px">是</van-radio>
                        <van-radio name="0" icon-size="18px">否</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <area-page ref="areaPage" @result="bodyScrollTop"></area-page>

            <template v-if="true">
                <div class="title">来(返)沈情况</div>
                <van-field name="is_back" label="是否近期返沈" :rules="[{ required: true, message: '请选择是否近期返沈' }]">
                    <template #input>
                        <van-radio-group v-model="formItem.is_back" direction="horizontal">
                            <van-radio name="1" icon-size="18px">是</van-radio>
                            <van-radio name="0" icon-size="18px">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-if="formItem.is_back == 1"
                        readonly
                        clickable
                        name="departure"
                        :value="formItem.departure"
                        label="来(返)沈出发地"
                        placeholder="请选择来(返)沈出发地"
                        @click="showDeparturePicker = true"
                />
                <van-popup v-model="showDeparturePicker" position="bottom">
                    <van-area :area-list="provinceList"
                              value="210100"
                              @confirm="onDepartureConfirm"
                              @cancel="showDeparturePicker = false"
                    />
                </van-popup>
                <van-field
                        v-if="formItem.is_back == 1"
                        readonly
                        clickable
                        name="back_reason"
                        :value="formItem.back_reason_name"
                        label="来(返)沈事由"
                        placeholder="请选择来(返)沈事由"
                        @click="showBackReasonPicker = true"
                />
                <van-popup v-model="showBackReasonPicker" position="bottom">
                    <van-picker
                            show-toolbar
                            :columns="backReasonOption"
                            @confirm="onBackReasonConfirm"
                            @cancel="showBackReasonPicker = false"
                    />
                </van-popup>
                <van-field
                        v-if="formItem.is_back == 1"
                        readonly
                        clickable
                        name="arrive_time"
                        :value="formItem.arrive_time"
                        label="来(返)沈时间"
                        placeholder="请选择来(返)沈时间"
                        @click="showArriveTimePicker = true"
                />
                <van-popup v-model="showArriveTimePicker" position="bottom">
                    <van-datetime-picker
                            v-model="datePicker"
                            type="date"
                            :max-date="currentDate"
                            @confirm="onArriveTimeConfirm"
                            @cancel="showArriveTimePicker = false"
                    />
                </van-popup>
                <van-field name="wuhan_radio" label="是否途经武汉市"
                           v-if="formItem.is_back == 1"
                           :rules="[{ required: true, message: '请选择是否途经武汉市' }]">
                    <template #input>
                        <van-radio-group v-model="formItem.wuhan_radio" direction="horizontal">
                            <van-radio name="1" icon-size="18px">是</van-radio>
                            <van-radio name="0" icon-size="18px">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="wenzhou_radio" label="是否途经温州市"
                           v-if="formItem.is_back == 1"
                           :rules="[{ required: true, message: '请选择是否途经温州市' }]">
                    <template #input>
                        <van-radio-group v-model="formItem.wenzhou_radio" direction="horizontal">
                            <van-radio name="1" icon-size="18px">是</van-radio>
                            <van-radio name="0" icon-size="18px">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="hubei_radio" label="是否途经湖北其它城市"
                           v-if="formItem.is_back == 1"
                           :rules="[{ required: true, message: '请选择是否途经湖北其它城市' }]">
                    <template #input>
                        <van-radio-group v-model="formItem.hubei_radio" direction="horizontal">
                            <van-radio name="1" icon-size="18px">是</van-radio>
                            <van-radio name="0" icon-size="18px">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

                <div class="title">其它信息</div>
                <other-info ref="otherInfo"></other-info>

            </template>
            <div class="title">上传身份证照片</div>
            <wl-upload-img v-model="formItem.ocr_code"></wl-upload-img>

            <div class="div-bot">
                <van-button :disabled="submitDisabled" :loading="submitLoading" round block type="info"
                            native-type="submit" class="city-card-common-btn">
                    提交
                </van-button>
            </div>
        </van-form>

        <!--弹出手机号图片验证码-->
        <van-popup v-model="mobileVerifyModel" safe-area-inset-bottom
                   :style="{ width: '90%', position: 'fixed', top: '30%', borderRadius: '10px' }">
            <!--<div class="success-title">请 输 入 验 证 码</div>-->
            <div class="mobile-verify-code">
                <img :src="mobileQrimg" @click="showMobileCodeAction"/>
            </div>
            <div>
                <van-field clearable autofocus placeholder="请输入验证码" v-model="mobileVerifyCode" name="code" label="验证码"
                           @focus="bodyScrollTop" @blur="bodyScrollTop"/>
            </div>
            <van-button :style="{ borderRadius: '5px', margin: '5px auto 10px', width: '90%' }" native-type="button"
                        :loading="qrcodeBtnLoading" @click="onSendMobile" type="info" block>确定
            </van-button>
            <!--<div style="margin: 16px;">
                <div class="van-button van-button&#45;&#45;info van-button&#45;&#45;normal van-button&#45;&#45;block van-button&#45;&#45;round"
                     @click="onSendMobile">
                    确定
                </div>
            </div>-->
        </van-popup>
        <!-- 公众号二维码-->
        <van-popup v-model="successModel" :close-on-click-overlay="false" safe-area-inset-bottom
                   :style="{ width: '80%', position: 'fixed', top: '50%', borderRadius: '10px' }">
            <div class="success-title">
                <div>长 按 识 别 关 注 公 众 号</div>
                <div>查 看 通 行 证</div>
            </div>
            <div class="success-code">
                <img :src="require('@/assets/images/sst-qrcode-old.png')"/>
            </div>
        </van-popup>
        <!--    提示说明    -->
        <van-popup v-model="showReadme" :close-on-click-overlay="false" safe-area-inset-bottom
                   :style="{ width: '80%', position: 'fixed', top: '50%', borderRadius: '10px' }">
            <div class="readme-popup">
                <div class="readme-popup-title">温馨提示</div>
                <div class="readme-popup-content">
                    <p>根据《中华人民共和国传染病防治法》和沈阳市新型冠状病毒感染的肺炎疫情防控指挥部相关通告，本地、外来入沈人员应主动申领“健康通行码”，作为个人在沈通行的电子凭证。</p>
                    <p>本次“健康通行码”申领将纳入个人征信评价，请您主动办理，如实填报各项信息。</p>
                    <p>感谢您对沈阳市疫情防控工作的支持配合！</p>
                    <div class="tong-yi-box">
                        <van-checkbox v-model="tongyi" style="float: left;margin: 0px 8px;"></van-checkbox>
                        <div>
                            本人主动申领“健康通行码”，自愿填报各项个人信息，并承诺填报信息真实准确。如有虚假，本人愿承担相关法律责任。
                        </div>
                    </div>
                </div>
                <div class="readme-popup-btn">
                    <van-button block type="info"
                                native-type="button"
                                size="small"
                                class="readme-popup-btn-sm"
                                @click="choose">
                        申领办理
                    </van-button>
                </div>
            </div>

        </van-popup>

    </div>
</template>

<script>
import { insertUserpermit, getOpenidInfo } from '@/api/yi-qing-fang-kong.js'
import {
  getCodePic,
  checkVerificationCode,
  createVerificationCode
} from '@/api/wx-api'
// vant组件
import {
  // Dialog,
  Toast
} from 'vant'
// 页面模拟数据
import mockData from './data/mockData.js'
// 工具
import { identityCodeValid, identityCardnoSY, identityMobile, getSexByIdCard } from '@/libs/tools'
// 组件
// import wx from 'weixin-js-sdk'
import AreaPage from './components/area-page/index'
import OtherInfo from './components/other-info/index'
import WlUploadImg from './components/wl-upload-img/index'

export default {
  components: { WlUploadImg, OtherInfo, AreaPage },
  data () {
    this.phoneRules = [
      { required: true, message: '请输入手机号' },
      { validator: this.phoneValidator, message: '手机号格式错误' }
    ]
    this.codeRules = [
      { required: true, message: '请输入验证码' },
      { validator: this.codeValidator, message: '验证码错误' }
    ]
    return {
      formItem: {
        // 表单数据
        name: '',
        sex: '',
        sms: '',
        card_type: '',
        card_type_name: '',
        card_no: '',
        tel: '',
        is_permanent: '', // 是否常住
        area_type: '', // 区域类型
        area_id: '',
        street_id: '',
        community_id: '',
        area: '',
        street: '',
        community: '',
        loc_province: '', // 地图选取后的省
        loc_city: '', // 地图选取后的市
        loc_title: '', // 地图选取后的地址名
        loc_address: '', // 地图选取后的具体地址
        house_num: '', // 门牌号
        is_back: '', // 是否近期返沈
        arrive_time: '', // 来（返）沈时间
        back_reason: '', // 来（返）沈事由
        back_reason_name: '', // 来（返）沈事由名称
        departure: '',
        originate_province: '', // 出发地-省
        originate_city: '', // 出发地-市
        concentration_type: '', // 其它信息类型
        concentration_type_remark: '', // 其它信息地点名称
        viaway: '', // 途径地
        wuhan_radio: '',
        wenzhou_radio: '',
        hubei_radio: '',
        ocr_code: '',
        serverId: ''
      },
      sendBtnType: false,
      showReadme: true,
      tongyi: true,
      sendBtnName: '获取验证码',
      codeBtnColor: '#1989FA',
      showIdCardTypePicker: false,
      showDeparturePicker: false,
      showBackReasonPicker: false,
      showArriveTimePicker: false,
      qrcodeFocus: false,
      qrcodeBtnLoading: false,
      submitDisabled: false,
      submitLoading: false,
      successModel: false,
      loading: false,
      loadingText: '加载中',
      routeObj: {}, // 路由对象
      provinceList: mockData,
      cardTypeOption: mockData.cardTypeOption,
      areaTypeOption: mockData.areaTypeOption,
      backReasonOption: mockData.backReasonOption,
      datePicker: new Date(),
      currentDate: new Date(),
      cardnoState: false, // 身份证检验状态
      mobileVerifyModel: false,
      mobileQrimg: '',
      mobileVerifyKey: '', // 图片验证码key
      mobileVerifyCode: '' // 图片验证码
    }
  },
  computed: {},
  methods: {
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    idCardValidator (val) {
      switch (this.formItem.card_type) {
        case 1:
          // 身份证
          const reg1 = identityCodeValid(val)
          if (!reg1.pass) {
            // this.failNotice('请检查身份证格式！')
            return false
          }
          break
        case 3:
          // 护照
          const reg2 = /^[a-zA-Z0-9]{5,17}$/
          if (!reg2.test(val)) {
            // this.failNotice('请检查护照格式！')
            return false
          }
          break
        case 4:
          // 港澳通行证
          const reg3 = /^[HMhm]{1}([0-9]{10}|[0-9]{8})$/
          if (!reg3.test(val)) {
            // this.failNotice('请检查港澳通行证格式！')
            return false
          }
          break
      }
    },
    phoneValidator (val) {
      return identityMobile(val)
    },
    nameValidator (val) {
      if (val === '') {
        this.failNotice('请输入姓名')
        return false
      }
      return true
    },
    cardTypeValidator (val) {
      if (val === '') {
        this.failNotice('请选择证件类型')
        return false
      }
      return true
    },
    // 校验函数返回 Promise 来实现异步校验
    codeValidator (code) {
      Toast.loading('验证中...')
      checkVerificationCode({
        mobile: this.formItem.tel.toString().trim(),
        code: this.formItem.sms.toString().trim()
      }).then(ret => {
        if (ret.data.errcode === 0) {
          this.mobileVerifyModel = false
          // setTimeout(() => {
          //   this.qrcodeFocus = false
          // })
          Toast.clear()
          return true
        } else {
          this.failNotice(ret.data.errmsg)
          Toast.clear()
          return false
        }
      })
    },
    identityCode (val) {
      Toast.loading('验证中...')
      checkVerificationCode({ mobile: this.formItem.tel, code: this.formItem.sms }).then(ret => {
        if (ret.data.errcode === 0) {
          this.mobileVerifyModel = false
          // setTimeout(() => {
          //   this.qrcodeFocus = false
          // })
          Toast.clear()
          return true
        } else {
          this.failNotice(ret.data.errmsg)
          Toast.clear()
          return false
        }
      })
    },
    onFailed (errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
      console.log('failed', errorInfo)
    },
    onSubmit (value) {
      console.log('表单提交', this.formItem)
      // 校验姓名
      if (!this.formItem.name) {
        this.failNotice('请输入姓名')
        return false
      }
      // 校验性别
      if (!this.formItem.sex) {
        this.failNotice('请选择性别')
        return false
      } else {
        const sex = getSexByIdCard(this.formItem.card_no)
        if (this.formItem.card_type === 1 && this.formItem.sex !== sex) {
          this.failNotice('选择的性别与身份证号不符')
          return false
        }
      }
      // 校验证件类型
      if (!this.formItem.card_type) {
        this.failNotice('请选择证件类型')
        return false
      }
      // 校验证件号
      if (!this.formItem.card_no) {
        this.failNotice('请输入证件号码')
        return false
      } else {
        if (this.formItem.card_type === 1) {
          const rtn = identityCodeValid(this.formItem.card_no)
          // console.log('身份证校验原因', rtn.tip)
          // console.log('身份证校验状态', rtn.pass)
          if (!rtn.pass) {
            this.failNotice(rtn.tip)
            return false
          } else {
            const sex = getSexByIdCard(this.formItem.card_no)
            if (this.formItem.sex !== sex) {
              this.failNotice('选择的性别与身份证号不符！')
              return false
            }
          }
        }
      }
      // 校验手机号
      if (!identityMobile(this.formItem.tel)) {
        this.failNotice('请输入正确手机号')
        return false
      }
      // 校验验证码
      if (!this.formItem.sms) {
        this.failNotice('请输入验证码')
        return false
      } else {
        this.codeValidator()
      }
      // 校验是否常住
      if (!this.formItem.is_permanent) {
        this.failNotice('请选择是否常住居民')
        return false
      }
      // 区域部分
      const areaPageData = this.$refs.areaPage.checkForm()
      // 校验近期是否来（返）沈
      if (this.formItem.is_back === '') {
        this.failNotice('请选择是否近期返沈')
        return false
      }
      // 校验出发地
      if (this.formItem.is_back === '1' && !this.formItem.departure) {
        this.failNotice('请选择来(返)沈出发地')
        return false
      }
      // 校验来（返）沈时间
      if (this.formItem.is_back === '1' && !this.formItem.arrive_time) {
        this.failNotice('请选择来（返）沈时间')
        return false
      }
      // 校验来（返）事由
      if (this.formItem.is_back === '1' && !this.formItem.back_reason) {
        this.failNotice('请选择来（返）沈事由')
        return false
      }
      // 校验是否途经武汉市
      if (this.formItem.is_back === '1' && !this.formItem.wuhan_radio) {
        this.failNotice('请选择是否途经武汉市')
        return false
      }
      // 校验是否途经温州市
      if (this.formItem.is_back === '1' && !this.formItem.wenzhou_radio) {
        this.failNotice('请选择是否途经温州市')
        return false
      }
      // 校验是否途经湖北其它城市
      if (this.formItem.is_back === '1' && !this.formItem.hubei_radio) {
        this.failNotice('请选择是否途经湖北其它城市')
        return false
      }
      // 其它信息
      const otherInfoData = this.$refs.otherInfo.checkForm()
      // 校验上传身份证
      if (!this.formItem.ocr_code) {
        this.failNotice('请上传身份证')
        return false
      }
      // 非沈阳人处理
      // if (!this.cardnoState) {
      //   this.formItem.back_reason = ''
      // }
      // 来（返）沈时间处理
      if (this.formItem.is_back !== '1') {
        this.formItem.arrive_time = null
        this.formItem.back_reason = ''
        this.formItem.back_reason_name = ''
        this.formItem.departure = ''
        this.formItem.wuhan_radio = ''
        this.formItem.wenzhou_radio = ''
        this.formItem.hubei_radio = ''
      }
      // 身份证去空格处理
      this.formItem.card_no.toString().trim()
      // 不知道儿童身份证号输入父母身份证号，后追加三位随机数
      if (this.formItem.card_type === 5) {
        let rand = ''
        for (let i = 0; i < 3; i++) {
          let r = Math.floor(Math.random() * 10)
          rand += r
        }
        this.formItem.card_no = this.formItem.card_no.toString().trim() + rand
        console.log('儿童身份证处理后', this.formItem.card_no)
      }
      // 途径地处理
      if (this.formItem.wuhan_radio === '1') {
        if (this.formItem.wenzhou_radio === '1') {
          if (this.formItem.hubei_radio === '1') {
            this.formItem.viaway = '武汉市,温州市,湖北其它城市'
          } else {
            this.formItem.viaway = '武汉市,温州市'
          }
        } else {
          if (this.formItem.hubei_radio === '1') {
            this.formItem.viaway = '武汉市,湖北其它城市'
          } else {
            this.formItem.viaway = '武汉市'
          }
        }
      } else {
        if (this.formItem.wenzhou_radio === '1') {
          if (this.formItem.hubei_radio === '1') {
            this.formItem.viaway = '温州市,湖北其它城市'
          } else {
            this.formItem.viaway = '温州市'
          }
        } else {
          if (this.formItem.hubei_radio === '1') {
            this.formItem.viaway = '湖北其它城市'
          } else {
            this.formItem.viaway = ''
          }
        }
      }
      console.log('区域组件', areaPageData)
      console.log('其它信息组件', otherInfoData)
      if (areaPageData && otherInfoData) {
        // if (areaPageData) {
        // 组件数据处理
        this.formItem.area_type = areaPageData.area_type
        this.formItem.area_id = areaPageData.area.id
        this.formItem.area = areaPageData.area.text
        this.formItem.street_id = areaPageData.street.id
        this.formItem.street = areaPageData.street.text
        this.formItem.community_id = areaPageData.community.id
        this.formItem.company_code = !this.$common.xeUtils.isEmpty(areaPageData.community.company_code) ? areaPageData.community.company_code : areaPageData.street.company_code
        this.formItem.community = areaPageData.area_type === '1' ? areaPageData.community.text : areaPageData.cunValue
        this.formItem.house_num = areaPageData.house_num
        this.formItem.loc_title = areaPageData.title
        this.formItem.loc_address = areaPageData.address
        this.formItem.loc_province = areaPageData.province
        this.formItem.loc_city = areaPageData.city
        this.formItem.longitude = areaPageData.lng
        this.formItem.latitude = areaPageData.lat
        this.formItem.address = this.formItem.loc_province + this.formItem.loc_city + this.formItem.loc_title + this.formItem.loc_address
        this.formItem.concentration_type = otherInfoData.check
        this.formItem.concentration_type_remark = otherInfoData.title
        // 校验成功后插入
        console.log('校验成功-进开始行插入')
        this.insertUserpermitAction()
      }
    },
    chooseMap (type) {
      this.$router.push({
        name: 'epidemic-map',
        query: {
          type: type,
          formData: this.formItem
        }
      })
    },
    // 身份证校验
    identityCardno () {
      this.bodyScrollTop()
      if (this.formItem.card_type === 1) {
        this.cardnoState = identityCardnoSY(this.formItem.card_no)
        console.log('身份证沈阳人检验', this.cardnoState)
      }
    },
    // 表单提交
    insertUserpermitAction () {
      console.log('表单最终提交内容', this.formItem)
      // 表单提交
      this.successModel = false
      this.submitDisabled = false
      this.submitLoading = true
      insertUserpermit(this.formItem).then(ret => {
        if (ret.data.errcode === 0) {
          this.successModel = true
          this.submitDisabled = true
          this.submitLoading = false
          console.log('保存回调', ret.data.data)
          window.localStorage.removeItem('formData')
          // this.$dialog.alert({
          //   message: '您的电子通行证已生成!'
          // }).then(() => {
          //   this.$router.push({
          //     name: 'epidemic-submit-success',
          //     query: {}
          //   })
          // })
        } else {
          this.successModel = true
          this.submitDisabled = false
          this.submitLoading = false
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    getOpenidInfoAction () {
      getOpenidInfo({ type: '1' }).then(ret => {
        console.log('判断是否注册过', ret.data)
        if (ret.data.errcode === 0) {
          if (!this.$common.xeUtils.isEmpty(ret.data.data.result)) {
            this.successModel = true
            // this.$router.push({
            //   name: 'epidemic-submit-success',
            //   query: {}
            // })
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    showMobileCodeAction () {
      if (!identityMobile(this.formItem.tel)) {
        this.failNotice('请输入手机号')
        return false
      }
      this.mobileVerifyModel = true
      this.mobileVerifyCode = ''
      // setTimeout(() => {
      //   this.qrcodeFocus = true
      // }, 300)
      getCodePic().then(ret => {
        if (ret.data.errcode === 0) {
          this.mobileQrimg = ret.data.data.pic
          this.mobileVerifyKey = ret.data.data.key
        }
      })
    },
    // 去苹果机型白边
    bodyScrollTop () {
      winToTop()
      this.setStorage(this.formItem)
    },
    onSendMobile () {
      this.qrcodeBtnLoading = true
      createVerificationCode({
        key: this.mobileVerifyKey,
        vcode: this.mobileVerifyCode,
        mobile: this.formItem.tel
      }).then(ret => {
        if (ret.data.errcode === 0) {
          this.qrcodeBtnLoading = false
          this.mobileVerifyModel = false
          this.sendBtnType = true
          let timeNum = 50
          let interval = setInterval(() => {
            if (timeNum < 60 && timeNum > 0) {
              timeNum--
              // this.sendBtnName = '获取验证码（' + timeNum + ')'
              this.sendBtnName = '再次获取'
              this.codeBtnColor = '#DEDEDE'
            } else {
              this.sendBtnType = false
              this.sendBtnName = '再次获取'
              this.codeBtnColor = '#1989FA'
              clearInterval(interval)
            }
          }, 1000)
        } else {
          this.qrcodeBtnLoading = false
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    onCardTypeConfirm (value) {
      this.formItem.card_type = value.value
      this.formItem.card_type_name = value.text
      this.showIdCardTypePicker = false
    },
    onDepartureConfirm (value) {
      this.formItem.departure = value[0].name + value[1].name
      this.formItem.originate_province = value[0].name
      this.formItem.originate_city = value[1].name
      this.showDeparturePicker = false
    },
    onBackReasonConfirm (value) {
      this.formItem.back_reason = value.value
      this.formItem.back_reason_name = value.text
      this.showBackReasonPicker = false
    },
    onArriveTimeConfirm (value) {
      this.formItem.arrive_time = this.datePicker.getFullYear() + '-' + (this.datePicker.getMonth() + 1) + '-' + this.datePicker.getDate()
      this.showArriveTimePicker = false
    },
    setStorage (formData) {
      window.localStorage.setItem('formData', JSON.stringify(formData))
    },
    choose () {
      if (this.tongyi) {
        this.showReadme = false
      } else {
        this.showReadme = true
      }
    }

  },
  mounted () {
    // 获取路由信息
    this.routeObj = this.$route.query
    console.log('表单页面路由信息', this.routeObj)
    // 获取登录信息
    this.getOpenidInfoAction()
    // 获取本地表单数据
    if (window.localStorage.getItem('formData')) {
      this.formItem = JSON.parse(window.localStorage.getItem('formData'))
      console.log('表单页面表单数据', this.formItem)
      window.localStorage.removeItem('formData')
    }
    // 区域菜单数据预处理
    console.log('表单信息', this.formItem)
  },
  watch: {
    // 'formItem.is_permanent' (val) {
    //   this.formItem.arrive_time = val === '1' ? '' : this.formItem.arrive_time
    // },
    'formItem.is_back' (val) {
      /* this.formItem.arrive_time = val === '0' ? null : this.formItem.arrive_time
      this.formItem.back_reason = val === '0' ? '' : this.formItem.back_reason
      this.formItem.back_reason_name = val === '0' ? '' : this.formItem.back_reason_name
      this.formItem.departure = val === '0' ? '' : this.formItem.departure
      this.formItem.wuhan_radio = val === '0' ? '' : this.formItem.wuhan_radio
      this.formItem.wenzhou_radio = val === '0' ? '' : this.formItem.wenzhou_radio
      this.formItem.hubei_radio = val === '0' ? '' : this.formItem.hubei_radio */
    },
    formItem () {
      console.log('formItem变化啦')
    }
  }
}
</script>

<style scoped>
    /deep/ .van-field__label {
        min-width: 5.625rem;
        margin-right: 10px;
        width: auto;
    }

    .mobile-verify-code {
        display: flex;
        justify-content: center;
        padding: 15px;
    }

    .success-code {
        display: flex;
        justify-content: center;
        padding: 5px 15px 10px;
    }

    .success-title {
        padding: 5px;
        text-align: center;
    }

    .van-radio {
        float: left;
        margin-right: 10px;
    }

    .van-popup /deep/ .van-ellipsis {
        font-size: 0.95rem;
    }

    .title {
        width: 100%;
        padding: 0.625rem 0.9375rem;
        font-size: 12px;
    }

    .action-item .van-cell__title {
        -webkit-box-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit;
        width: 5.625rem;
    }

    .content {
        width: 100%;
        background-color: #F5F5F5;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .content >>> .van-cell {
        margin: 0 2%;
        width: 96%;
        font-size: 12px;
    }

    .content >>> .van-dialog__content {
        padding: 10px;
        text-align: center;
    }

    .van-field__control {
        font-size: 12px;
    }

    .content >>> .van-cell__value .van-field__body .van-field__control {
        font-size: 12px;
    }

    .content >>> .van-cell__value {
        text-align: left;
    }

    .div-bot {
        margin: 10px;
    }

    .div-bot >>> .van-button--info {
        border: 1px solid #75ACDC;
    }

    .div-bot >>> .van-button {
        height: 2.5rem;
    }

    .city-card-common-btn {
        color: white;
        font-size: 12px;
        padding: 0;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #75ACDC;
    }

    .content >>> .van-cell__value {
        /*flex: inherit;*/
        font-size: 12px;
    }

    .content >>> .value-item .van-cell__value {
        width: 100%;
    }

    .van-action-sheet__cancel, .van-action-sheet__item {
        font-size: 12px;
    }

    .van-cell__value span {
        /*color: black;*/
    }

    .van-dropdown-menu {
        height: 25px;
    }

    .van-hairline--top-bottom::after {
        border-width: 0px 0px;
    }

    .chaochu >>> .van-cell__value {
        width: 100%;
    }

    .div1 >>> .van-cell__value {
        width: 100%;
    }

    .div2 >>> .van-cell__value {
        width: 100%;
    }

    .other-info .van-field__label.radio-item, .tou .van-field__label.radio-item {
        width: 8.625rem;
    }

    .suggest.van-cell.van-field span {
        width: 5rem;
    }

    .readme-popup {
        padding: 25px;
    }

    .readme-popup .readme-popup-title {
        text-align: center;
        color: red;
        font-weight: bold;
        text-decoration: underline;
    }

    .readme-popup p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        text-indent: 25px
    }

    .readme-popup-btn {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .readme-popup-btn-sm {
        width: 45%;
    }

    .tong-yi-box {
        font-size: 12px;
    }

    .tong-yi-box >>> .van-checkbox__icon {
        font-size: 15px;
    }
    /*.content >>> .van-button--small{*/
    /*    padding: 0;*/
    /*}*/
</style>
